<template>
    <div style="height: 100%">
        <view-box>
            <x-img :src="src" @on-success="success" @on-error="error"></x-img>
        </view-box>
    </div>
</template>

<script>
    import { XImg, ViewBox } from 'vux'

    export default {
        name: 'ActivityPic',
        data () {
            return {
                src: 'http://cdn.maxstudiozhuhai.com/activity/' + this.$route.params.activityId + '.jpg?v=1.2'
            }
        },
        components: {
            XImg,
            ViewBox
        },
        mounted () {
            this.$vux.loading.show({
                text: '活动加载中'
            })
        },
        methods: {
            success (src, ele) {
                this.$vux.loading.hide()
            },
            error (src, ele, msg) {
                this.$vux.loading.hide()
                this.$vux.alert.show({
                    title: '错误',
                    content: '资源加载失败!',
                    onShow () {
                    },
                    onHide () {
                    }
                })
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
